<template>
  <div class="rank" :class="{isHadow:shadow}">
    <h4 class="title">
      {{title}}
      <span class="pull-right more" v-if="data.length>6">更多&gt;&gt;</span>
    </h4>
    <ul class="list">
      <li v-for="(item,index) in data" :key="index">
        <div v-if="index<6">
          <span :class="[index<Number(ranking)?'active':'']">{{index+1}}</span>
          <span>{{item.text}}</span>
          <span>{{item.num}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    shadow: {
      type: Boolean,
      default: true
    },
    title: {
      type: String
    },
    data: {
      type: Array
    },
    ranking: {
      type: String,
      default: 3
    }
  },
  data() {
    return {
      len: 6
    };
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.isHadow {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

.rank {
  background-color: #fff;
  padding: 10px 15px;

  .title {
    font-size: 16px;
    text-align: left;
    .more {
      font-size: 12px;
      color: #3c8dbc;
      cursor: pointer;
    }
  }

  .list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;

    li {
      margin-top: 16px;
      cursor: pointer;
      text-align: left;

      span {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 22px;
        vertical-align: middle;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        &:first-child {
          background-color: #f5f5f5;
          border-radius: 20px;
          display: inline-block;
          font-size: 12px;
          font-weight: 600;
          margin-right: 24px;
          height: 20px;
          line-height: 20px;
          width: 20px;
          text-align: center;
        }

        &.active {
          background-color: #fc4b6c;
          color: #fff;
        }

        &:last-child {
          float: right;
        }
      }
    }
  }
}

.mobile .rank {
  padding: 0 32px 32px 32px;
}
</style>